<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "zhangsan",
      dog: {
        name: "旺财",
        age: 2,
      },
    };
  },
  // 侦听器 要写到和 data 平级的 watch 中
  watch: {
    // 1.------------ 函数写法 -------------
    // uname (newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // }
    // 2.------------ 对象写法 ------------- (写成对象，就是为了添加 immediate 或 deep 选项)
    uname: {
      handler(newVal, oldVal) {
        // 写对象格式，handler必须写，名字固定
        console.log(newVal, oldVal);
      },
      immediate: true, //加入这个选项，表示立即侦听 (通俗的说，进入页面马上获取初始值)
    },
    // dog: {
    //   handler(newVal) {
    //     console.log(newVal);
    //   },
    //   deep: true //深度侦听，用于侦听对象的属性变化
    // },

    // 2.------------ 只侦听对象的某个语法 -------------
    'dog.age' (newVal) {
      console.log(newVal);
    }
  },
};
</script>

<style>
</style>